<template>
	<view class="all">
		<u-subsection :list="list" :current="current" @change="tabs"></u-subsection>
		<view class="info">
			<view class="box" v-for="(item , index) in lists" :key="index">
				<view class="title">
					{{item.date}}
				</view>
				<view class="lists">
					<view class="list" :class="{active:item2.type == 1}" v-for="(item2,index2) in item.time"
						:key="index2" @click="chose(index,index2)">
						{{item2.time}}
					</view>
				</view>
			</view>
		</view>
		<view class="last">
			<view class="left" @click="all()">
				立即保存
			</view>
			<view class="right">
				全选
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['今天', '后天', '12：00'],
				current: 0,
				lists: [],
				tit: {
					date: [{
						date: "",
						time: []
					}, {
						date: "",
						time: []
					}],
					cancel: [{
						date: "",
						time: []
					}, {
						date: "",
						time: []
					}]
				}
			};
		},
		onLoad() {
			this.gettime()
		},
		methods: {
			async gettime() {
				const res = this.$api("/support_worker/user/member_date", 'post', {
					type: this.current + 1
				}).then(res => {
					console.log(res);
					this.lists = res.data.data
				})
			},
			tabs(e) {
				this.current = e
				this.gettime()
			},
			chose(index, index2) {
				if (this.lists[index].time[index2].type == 0) {
					this.lists[index].time[index2].type = 1
					if (this.tit.date[index].time.indexOf(this.lists[index].time[index2].time) < 0) {
						this.tit.date[index].time.push(this.lists[index].time[index2].time)
					}
					this.tit.date[index].date = this.lists[index].date
					// console.log(this.tit.date[index].time);
				} else {
					if (this.tit.cancel[index].time.indexOf(this.lists[index].time[index2].time) < 0) {
						this.tit.cancel[index].time.push(this.lists[index].time[index2].time)
					}
					this.tit.cancel[index].date = this.lists[index].date
					// this.tit.date[index].cancel = this.lists[index].date
					this.lists[index].time[index2].type = 0
				}

			},
			all() {
				this.$api("/support_worker/user/date",'post',this.tit).then(res=>{
					console.log(res);
					if(res.data.code==1){
						uni.$u.toast(res.data.msg)
						this.gettime()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		box-sizing: border-box;

		.info {
			padding: 15px 15px 70px 15px;
		}

		.box {
			// padding: 5px 15px;

			.title {
				font-size: 13px;
				font-weight: 400;
				color: #999999;
				margin: 10px 0;
			}

			.lists {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.list {
					background: #FFF8EE;
					border-radius: 5px;
					margin: 5px;
					padding: 5px;
					font-size: 14px;
					font-weight: 400;
					color: #999999;
				}

				.active {
					background: #FB774B;
					border-radius: 5px;
					margin: 5px;
					padding: 5px;
					font-size: 14px;
					font-weight: 400;
					color: #fff;
				}
			}
		}

		.last {
			width: 100%;
			padding: 10px 10px 20px 10px;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0px -2px 4px 1px rgba(0, 0, 0, 0.05);
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;

			.left {
				flex: 1;
				background: #FB774B;
				border-radius: 40px;
				text-align: center;
				font-size: 14px;
				font-weight: bold;
				color: #FFFFFF;
				padding: 10px;
				margin: 0 10px;
			}

			.right {
				margin: 0 10px;
				flex: 1;
				background: #FDAE47;
				border-radius: 40px;
				text-align: center;
				font-size: 14px;
				font-weight: bold;
				color: #FFFFFF;
				padding: 10px;
			}
		}
	}
</style>